<template>
  <div class="content_page">
    <div class="content_page_title" :class="['content_page_title', globalFont]">
      {{ datalist.helpTitle }}
    </div>
    <div class="content_page_content" v-if="datalist.helpType == 'TEXT'" :class="['content_page_content', globalFont]">
      {{ datalist.helpContent }}
    </div>
    <div class="content_page_content" v-if="datalist.helpType == 'IMAGE'" :class="['content_page_content', globalFont]">
      <div v-for="(i, k) in datalist.imageUrls" :key="k">
        <image :src="i"></image>
      </div>
    </div>
    <div class="content_page_content" v-if="datalist.helpType == 'VIDEO'" :class="['content_page_content', globalFont]">
      <video
        :src="datalist.videoUrl"
        autoplay
        muted
        controls
        class="full-screen-video"
        ref="videoPlayer"
        id="videoId"
      ></video>
      <!-- <button @click="enterFullscreen">全屏播放</button> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import type { HelpCenterDetail, resInfo } from "@/api/myInfo/type.ts";
import { helpsInfo } from "@/api/myInfo/myInfo.ts";
const helpId = ref(0);
const datalist = ref<HelpCenterDetail>({
  helpId: null,
  helpTitle: "",
  helpType: "",
  imageUrls: "",
  coverUrl: "",
  videoUrl: "",
  helpContent: "",
});
const getDataList = () => {
  helpsInfo(helpId.value)
    .then((res: resInfo) => {
      if (res.resultStatus) {
        datalist.value = res.resultData;
        datalist.value.imageUrls = datalist.value.imageUrls.split(";");
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad((options) => {
  const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
  helpId.value = Number(options?.helpId);
  getDataList();
});
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content_page {
  background-color: #ffffff;
  height: 100vh;
  overflow: auto;
  padding: 40rpx;

  &_title {
    // font-size: 32rpx;
    font-weight: bold;
    text-align: left;
    color: #333;
    margin-bottom: 40rpx;
  }

  &_content {
    // font-size: 28rpx;
    font-weight: normal;
    text-align: left;
    color: #666;
    line-height: 52rpx;
  }
}

.full-screen-video {
  width: 100%;
}
</style>
